<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-if="$route.path=='/userlists'">{{$t('sidebar.business')}}</el-breadcrumb-item>
        <el-breadcrumb-item v-else>{{$t('newcrumbs.crumbsOne')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('userList.crumbsTwo')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- -------------搜索查询栏------------------------ -->
    <search 
			:searchData="searchData" 
			@search="search" 
			@putExcel="putExcel" 
			:searchRight="true"
			:outputRight="$store.state.common.permiss.userlist?$store.state.common.permiss.userlist.includes('export'):$store.state.common.permiss.userlists.includes('export')"
    ></search>
    <!-- -------------表单显示栏------------------------ -->
    <!-- <div class="table" v-if="$store.state.common.permiss.includes('RIGHT_ACCOUNT_LENDING_LIST')"> -->
    <el-row class="list_operation">
      <el-button v-if="$store.state.common.permiss.userlist?$store.state.common.permiss.userlist.includes('add'):false" type="primary" @click.stop="onAdd">+{{$t('new.no65')}}</el-button>
      <el-button v-if="$store.state.common.permiss.userlist?$store.state.common.permiss.userlist.includes('add'):false" type="primary" @click.stop="onTelemarket">{{$t('add.no71')}}</el-button>
    </el-row>
    <div class="table">
      <template>
        <el-table :data="tableData" stripe size="small" v-loading="loadFlag" @selection-change="handleSelectionChange">
          <el-table-column type="selection"  width="55">
          </el-table-column>
          <el-table-column align="center" prop="id" :label="$t('public.userId')" >
          </el-table-column>
          <el-table-column align="center" prop="phone" :label="$t('public.userPhone')" >
          </el-table-column>
          <el-table-column align="center" prop="name" :label="$t('public.name')" >
          </el-table-column>
          <el-table-column align="center" prop="regChannel" :label="$t('public.registerChannel')" >
          </el-table-column>
          <el-table-column align="center" prop="status" :label="$t('public.approveStatus')" >
            <template slot-scope="scope">
              <span>{{$t($store.getters.new_userSelfStatus(scope.row.userExtra.isAuth))}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="orderCount" :label="$t('public.orderCount')" >
          </el-table-column>
          <el-table-column align="center" prop="isBlack" :label="$t('public.userSelfStatus')" >
            <template slot-scope="scope">
              <span>{{$t($store.getters.blackStatus(scope.row.isBlack))}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="regTime" :label="$t('public.registerDate')" width="86">
          </el-table-column>
          <el-table-column align="center" prop="regDevice" :label="$t('public.registerClient')" width="86">
            <template slot-scope="scope">
              <span>{{$t($store.getters.clientStatus(scope.row.regDevice))}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="appName" :label="$t('public.appName')" >
          </el-table-column>
          <el-table-column align="center" prop="appPackage" :label="$t('public.appPackage')" >
          </el-table-column>
          <el-table-column align="center" prop="operation" :label="$t('public.operation')" >
            <template slot-scope="scope" v-if="$store.state.common.permiss.userlist?$store.state.common.permiss.userlist.includes('view'):$store.state.common.permiss.userlists.includes('view')">
              <span class="table_opr" @click="goDetali(scope.row.id)">{{$t('public.detail')}}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- ------------  分页显示栏  ------------------------ -->
    <el-row type="flex" justify="end">
      <div class="pages" >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          layout="sizes, prev, pager, next, total,->"
          :page-sizes="pagination.pageSizeOptions"
          :page-size="pagination.pageSize"
          @size-change="handleSizeChange"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-row>
    <div class="foot"></div>
    <el-dialog :title="$t('new.no65')" :visible.sync="addVisible" width="40%">
      <el-form :model="addForm" size="small" ref="addForm" label-width="120px" :rules="rules">
        <el-form-item :label="$t('public.userSelfStatus')" prop="isBlcak">
          <el-select size="small" v-model="addForm.isBlcak" :placeholder="$t('public.placeholder')">
            <el-option v-for="item in userStatusOption" :key="item.value" :label="$t(item.label)" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('public.no37')" prop="remark">
          <el-input type="textarea" v-model="addForm.remark" :rows="4" :placeholder="$t('loanMoney.placeholder')+'~'" maxlength="600"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="submitForm('addForm')">{{$t('public.no47')}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import getApp from 'src/mixins/getApp.js';
import putExcel from 'src/mixins/putExcel.js';
import getChannel from 'src/mixins/getChannel.js';
import getMerchant from 'src/mixins/getMerchant.js';

export default {
  name: 'putLogList',
  mixins:[getApp,putExcel,getChannel,getMerchant],
  data () {
    const searchData=[
      {
        type: 'input',
        label: 'public.userId',
        attr: 'id',
        value: ''
      },
      {
        type: 'input',
        label: 'public.name',
        attr: 'name',
        value: ''
      },
      {
        type: 'input',
        label: 'public.userPhone',
        attr: 'phone',
        value: ''
      },{
        type: 'select',
        attr: 'isAuth',
        label: 'public.approveStatus',
        option: this.$store.state.options.approveStatus_options,
        value: '',
        langFlag: true,
      },{
        type: 'select',
        attr: 'isBlack',
        label: 'public.userSelfStatus',
        option: this.$store.state.options.blackStatus_options,
        value: '',
        langFlag: true,
      },{
        type: 'rangePicker',
        label: 'public.registerDate',
        attr: 'registerDate',
        value: [],
      },
      {
        type: 'input',
        label: 'userList.applyCount',
        attr: 'orderCount',
        value: '',
      },
      {
        type: 'select',
        attr: 'appName',
        label: 'public.appName',
        option: [],
        value: '',
        langFlag: false,
      },{
        type: 'select',
        attr: 'appPackage',
        label: 'public.appPackage',
        option: [],
        value: '',
        langFlag: false,
      },
      {
        type: 'select',
        attr: 'regDevice',
        label: 'public.registerClient',
        option: this.$store.state.options.registerClient,
        value: '',
        langFlag: true,
      },
      {
        type: 'select',
        label: 'public.registerChannel',
        attr: 'regChannel',
        option:[],
        value: '',
        langFlag: false,
      },
      // {
      //   type: 'doubleInput',
      //   label: 'teleMarketing.no49',
      //   attr: ['loanCountMin','loanCountMax'],
      //   value: [],
      // },
      // {
      //   type: 'doubleInput',
      //   label: 'teleMarketing.no74',
      //   attr: ['loanCountMin','loanCountMax'],
      //   value: [],
      // },
      // {
      //   type: 'select',
      //   label: 'teleMarketing.no75',
      //   attr: 'regChannel',
      //   option:this.$store.state.options.isOverdue_option,
      //   value: '',
      //   langFlag: true,
      // },
      this.$route.name=='userlists'?{
        type: 'select',
        attr: 'partnerId',
        label: 'proManage.partnerName',
        option: [], //商户名称
        value: '',
        langFlag: false,
      }:'',
    ]
    return {
      flag: true,
      loadFlag: true,
      pagination: {
        pageSize: global.config.pageSize,
        pageSizeOptions: global.config.pageSizeOptions,
        current: 1,
        total: 0,
      },
      searchData:searchData,
      formInline: {},// 用户查询信息数据对应字段
      tableData: [],// 用户信息数据模拟
      userStatusOption:this.$store.state.options.addSpecialUser,
      putExcelUrl:this.$action.user_userExport,
      multipleSelection:[],
      addVisible:false,
      userIds: [],
      addForm:{
        isBlcak: '',
        remark: ''
      },
      rules: {
        isBlcak:[{required: true,message: this.$t("login.required"),trigger: "change"}],
        remark:[{required: true,message: this.$t("login.required"),trigger: "blur"}]
      }
    }
  },
  methods: {
    handleSizeChange (val) {// 每页条数变化时操作
      this.pagination.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange (val) { // 分页按钮点击操作
      this.pagination.current = val;
      this.getTableData();
    },
    search(search) { // 搜索
      this.formInline = {
        partnerId:search.partnerId,
        id:search.id,
        name:search.name,
        phone:search.phone,
        isAuth:search.isAuth,
        isBlack:search.isBlack,
        regTimeBegin:search.registerDate?search.registerDate[0]:'',
        regTimeEnd:search.registerDate?search.registerDate[1]:'',
        orderCount:search.orderCount,
        appName:search.appName,
        appPackage:search.appPackage,
        regDevice:search.regDevice,
        regChannel:search.regChannel
      };
      if (this.flag) {
        this.pagination.currentPage = 1;
        this.flag = false;
        this.getTableData();
      }    
    },
    getTableData () { // 放款列表获取
      this.loadFlag = true;
      let option = {
        pageNum:this.pagination.current,
        pageSize:this.pagination.pageSize,
        param: {
          ...this.formInline
        }       
      }
      this.$axios.post(this.$action.user_userList, option).then(res => {
        this.flag = true;
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.pagination.total = res.data.total;
        }else{
          this.$globalMsg.error(res.message)
        }
        this.loadFlag = false;
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    onAdd() {
      this.userIds=this.multipleSelection.map(val=>{
        return val.id
      })
      if(this.userIds==''){
        this.$globalMsg.error(this.$t('public.no89'));
      }else{
        this.addVisible = true;
      }
    },
    close() {
      this.addVisible = false;
      this.$refs['addForm'].resetFields();
    },
    submitForm(formName) {
    let option = {
        param: {
          ids: this.userIds,
          ...this.addForm
        }       
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post(this.$action.user_userspecial, option).then(res => {
            if (res.code == 200) {
              this.$globalMsg.success(res.message);
              this.close();
              this.getTableData();
            }else{
              this.$globalMsg.error(res.message)
            }
          })
        }
      })
    },
    goDetali (id) { // 查看详情操作
      this.$router.push({path: '/userdetail', query: {userId: id}})
    },
    onTelemarket(){
      this.userIds=this.multipleSelection.map(val=>{
        return val.id
      })
      if(this.userIds==''){
        this.$globalMsg.error(this.$t('public.no89'));
      }else{
        let option = {
          param: {
            ids: this.userIds,
          }       
        }
        this.$axios.post(this.$action.user_telemarket, option).then(res => {
          if (res.code == 200) {
            this.$globalMsg.success(res.message);
            this.getTableData();
          }else{
            this.$globalMsg.error(res.message)
          }
        })
      }

    }
  },
  mounted () {
    this.getApp().then(app=>{
      this.searchData[7].option=app.appName;
      this.searchData[8].option=app.appPackage;
    })
    this.getChannel().then(arr=>{
      this.searchData[10].option=arr;
    })
    if(this.$route.name=='userlists'){
      this.getMerchant().then(arr=>{
        this.searchData[11].option=arr;
      })
    }
    this.getTableData();
  }
}
</script>
<style scoped lang="scss"></style>
